<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/http.js"></script>
    <title>展示列表</title>
</head>
<body>

<header>
    <div class="header_log">
        <a href="javascript:window.history.back();">
            <div id="cityname">
                <span class="am-icon-chevron-left cityname" id="btn-back">返回</span>
            </div>
        </a>
    </div>

    <!--轮播图-->
    <div class="swiper-container index_carousel">
        <div class="swiper-wrapper">
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <!--课程区域-->

    <div class="course-wrap-container">
        <div class="swiper-wrapper" id="juZhong">

        </div>

        <div class="swiper-wrapper" id="hangDang">

        </div>
    </div>

</header>

<main>
    <div class="img-gallary">
        <div class="teacher_title">
            <div class="hot_teacher" id="addressIf">

            </div>
        </div>
        <!--老师列表开始-->
        <div class="teacher_all" id="wrapper">

        </div>
        <!--老师列表结束-->
    </div>
</main>
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">预约老师</div>
        <form class="am-form"  method="post" name="myform" id="myform">
            <div class="am-modal-bd">
                <p>
                    <select id="doc-select-1" class="am-form-field am-round" name="choice" >
                        <option value="">请选择预约方式</option>
                        <option value="1">老师上门</option>
                        <option value="2">学生上门</option>
                    </select>
                </p>
                <p><input type="text" class="am-form-field am-round" name="username" id="username"
                          placeholder="请输入预约人姓名" value=""/></p>
                <p><input type="text" class="am-form-field am-round" name="phone" id="phone" placeholder="请输入预约人手机号码 " value=""/>
                </p>
            </div>
        </form>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm onclick="fmSubmit()">确定</span>
        </div>

    </div>
</div>
<div id="hdAlert">

</div>

<footer>
    <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default"
         id="">
        <ul class="am-navbar-nav am-cf am-avg-sm-4 bgcolor">
            <li>
                <a class="" data-am-modal="{target: '#my-alert'}">
                    <span class="am-icon-phone-square"></span>
                    <span class="am-navbar-label">预约老师</span>
                </a>
            </li>
            <li>
                <a href="###" class="">
                    <span class="am-icon-phone"></span>
                    <span class="am-navbar-label">咨询</span>
                </a>
            </li>
        </ul>
    </div>
</footer>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/list.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/order.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,//可以让图片循环轮播
        autoplayDisableOnInteraction: false,//在点击之后可以继续实现轮播
        pagination: ".swiper-pagination",//让小圆点显示
        paginationClickable: true,//实现小圆点点击
        roundLengths: true,
        observer:true,
        autoplay: 3000,//可选选项，自动滑动
    });
    function fmSubmit() {
        var username = $('#username').val();
        var phone = $('#phone').val();
        var teachway = $('#doc-select-1 option:selected').val();
        sessionStorage.setItem('username',username);
        sessionStorage.setItem('phone',phone);
        sessionStorage.setItem('techway',teachway);
        $('.am-form').submit();
    }
</script>
</body>
</html>